<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.thymeleaf.org/thymeleaf-extras-shiro">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>物品展示</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min.css-v=3.3.5.css"
          rel="stylesheet">
    <link href="css/font-awesome.min.css-v=4.4.0.css"
          rel="stylesheet">
    <link href="css/plugins/footable/footable.core.css"
          rel="stylesheet">

    <link href="css/plugins/dataTables/dataTables.bootstrap.css"
          rel="stylesheet">

    <link href="css/animate.min.css"
          rel="stylesheet">
    <link href="css/style.min.css-v=4.0.0.css"
          rel="stylesheet">
    <link href="layui/css/layui.css">
    <base target="_blank">
    <style>
        #zhuti {
            height: 100%;
        }
        #zhuti::before {
            background: url('img/lg.jpg') no-repeat fixed center;
            background-size: 257px;
            content: "";
            opacity: 0.2;
            /*透明度设置*/
            width: 60%;
            height: 69%;
            position: absolute;
            margin-left: 180px;
            z-index: 9999;
        }
    </style>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">

    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">

                    <h5>物品展示</h5>
<!--                    <span th:text="${#session.getAttribute('role')}">123</span>-->
<!--                    <span th:text="#{session.role}"></span>-->
                    <a shiro:hasAnyRoles="1,2" href="/user/downzip" style="float: right" class="layui-btn">下载所有物品二维码</a>
                    <div class="ibox-content">
                        <!--表格-->
                        <table id="zhuti" class="table table-striped table-bordered table-hover dataTables-example">
                            <thead id="thead1">
                                <tr>
                                    <th>物品名称</th>
                                    <th>总数</th>
<!--                                    <th>库存数</th>-->
                                    <th>图片</th>
                                    <th style="text-align: center">查看详情</th>
                                </tr>
                            </thead>
                            <tbody id="tbody2">
                                
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="js/jquery.min.js-v=2.1.4" ></script>
    <script src="js/bootstrap.min.js-v=3.3.5"
    ></script>

    <script src="js/plugins/dataTables/jquery.dataTables.js"
    ></script>

    <script src="js/plugins/dataTables/dataTables.bootstrap.js"
    ></script>
    <script src="layui/layer/layer.js" type="text/javascript" charset="utf-8"></script>

    <script src="js/content.min.js-v=1.0.0"
    ></script>
    <script src="layui/layui.js"></script>
    <script src="layui/excel.js"></script>


    <script>

        let listData = null;
        $(document).ready(function () {

            $.ajax({
                type: "get",
                url: "/user/searchTs",
                success: function (msg) {
                    // var msg1=JSON.stringify(msg);
                    // var list=msg1.list;
                    let str = "";//最终的一个实例串
                    let list = msg;//获取list
                    console.log(msg);
                    listData = msg;
                    let tbody = document.querySelector("#tbody2");//获取对象
                    // let tbody = $('#tbody2')//获取对象
                    // let tbody = $.querySelector('#tbody2');
                    let a = "";
                    let button1="";
                    // target
                    if (list.length != 0) {
                        for (let i = 0; i < list.length; i++) {
                            if(list[i].image==null){
                                list[i].image = ""
                            }
                            // console.log(list[i].id)
                            // 按钮1是删除
                            // let button2 = "<a style='z-index: 999' target=\"_self\" href=\"thing_bianji.html?id=" + list[i].id + "\"><button type=\"button\" style=\"margin-top: 6px;z-index: 999;\" class=\"btn btn-primary btn-xs\">物品编辑</button></a>"
                            let button1 = "<a style='z-index: 0;text-align: center' target=\"_self\"  href=\"thingsShowDetail.html?id=" + list[i].id + "\"><button type=\"button\" style=\"margin-top: 6px;z-index: 999;\" class=\"btn btn-primary btn-xs\">查看详情</button></a>"
                            str += "<tr><td>" + list[i].name + "</td><td>" + list[i].num +list[i].unit+ "</td><td><img style=' width: 50px' src="+list[i].image+">"+
                                 "</td><td style='margin-left: 50px;text-align: center '>"+button1+"</td></tr>";
                        }
                    }
                    tbody.innerHTML = str;
                    // f();
                }
            });
        });


        // function f() {
        //     $(".dataTables-example").dataTable({
        //         "order": [
        //             [6, "desc"]
        //         ]
        //     });
        //     var oTable = $("#editable").dataTable();
        //     oTable.$("td").edita1ble("http://www.zi-han.net/theme/example_ajax.php",
        //         {
        //             "callback": function (sValue, y) {
        //                 var aPos = oTable.fnGetPosition(this);
        //                 oTable.fnUpdate(sValue, aPos[0], aPos[1])
        //             },
        //             "submitdata": function (value, settings) {
        //                 return {
        //                     "row_id": this.parentNode.getAttribute("id"),
        //                     "column": oTable.fnGetPosition(this)[2]
        //                 }
        //             },
        //             "width": "90%",
        //             "height": "100%"
        //         })
        // }
        //
        // function fnClickAddRow() {
        //     $("#editable").dataTable().fnAddData(["Custom row", "New row", "New row", "New row", "New row"])
        // };

    </script>

</div>
</body>
</html>


